*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* html, body {
  height: 100%;
}

body {
  font-size: 14px;
  text-align: center;
} */

.inliner {
  height: 100%;
}

.inliner,
.inliner + .inlined {
  display: inline-block;
  vertical-align: middle;
}

.inlined {
  width: 90%;
}

.progress-meter {
    margin: 20px auto 69px;
    padding: 40px;
    /* width: 5.4rem; */
    position: relative;
    left: 1.4rem;
}

.progress-meter {
  counter-reset: point;
}
.progress-meter .progress-point:before {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  border-radius: 24px;
  -webkit-box-shadow: 0 0 0 2px white;
  -moz-box-shadow: 0 0 0 2px white;
  box-shadow: 0 0 0 2px white;
  content: "\2713";
  display: block;
  width: 24px;
  margin: 0 auto 12px;
  border: 4px solid #aaaaaa;
  text-align: center;
  background-color: white;
  color: white;
}
.progress-meter .track {
    position: relative;
    height: .1rem;
    width: 2.35rem;
    background: #dddddd;
}
.progress-meter .progress {
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 4px;
  background: red;
}
.progress-meter .progress-points {
  position: relative;
  margin: -.3rem 0 0;  
  padding: 0;
  list-style: none;
}
.progress-meter .progress-points [data-point='1'] {
  left: 0%;
}
.progress-meter .progress-points [data-point='2'] {
  left: 25%;
}
.progress-meter .progress-points [data-point='3'] {
  left: 50%;
}
.progress-meter .progress-points [data-point='4'] {
  left: 75%;
}
.progress-meter .progress-points [data-point='5'] {
  left: 100%;
}
.progress-meter .progress-point {
  -webkit-transition: color 1s;
  -moz-transition: color 1s;
  -o-transition: color 1s;
  transition: color 1s;
  position: absolute;
  display: block;
  width: 100px;
  margin-left: -50px;
  text-align: center;
  cursor: pointer;
  color: #999;
}
.progress-meter .progress-point.completed, .progress-meter .progress-point.active {
  color: #777777;
}
.progress-meter .progress-point.completed:before {
    border-color: #21c3eb;
    background-color: #21c3eb;
}
.progress-meter .progress-point.active:before {
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
  border-color: #777777;
}
.progress-meter .progress-point .label:before {
  counter-increment: point;
  content: counter(point) ". ";
  /* Display the counter */
}

.controls {
  text-align: center;
  font-size: 12px;
}

.trigger {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  padding: 6px 8px;
  border: none;
  font: 14px inherit;
  text-shadow: 0px 1px 1px rgba(251, 251, 251, 0.75);
  color: #626262;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bbbbbb), color-stop(100%, #959595));
  background-image: -webkit-linear-gradient(#bbbbbb, #959595);
  background-image: -moz-linear-gradient(#bbbbbb, #959595);
  background-image: -o-linear-gradient(#bbbbbb, #959595);
  background-image: linear-gradient(#bbbbbb, #959595);
}
